<template>
  <ul v-if="data">
    <li
      @click="handleBook(item)"
      v-for="item in data.datalist"
      :key="item._id"
      class="col-md-4 row li"
    >
      <img
        :src="`http://127.0.0.1:8888/${item.book_coverurl}`"
        class="col-md-5"
        alt="打开出错"
      />
      <div class="right col-md-7">
        <p>
          <span>
            {{ item.book_title }}
          </span>
          <span>
            {{ item.book_author }}
          </span>
        </p>
        <p>
          {{ item.book_describe }}
        </p>
      </div>
    </li>
  </ul>
</template>

<script>
import { useRouter } from "vue-router";

export default {
  props: ["data"],
  setup() {
    const router = useRouter();
    const handleBook = (item) => {
      let data=JSON.stringify(item)
      router.push({ path: `/home/book/${item._id}`});
    };

    return {
      handleBook,
    };
  },
};
</script>

<style lang="scss" scoped>
ul {

  border: 3px solid #c3dfea;
  padding: 20px;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 0px;
  .li {
    width: 30%;
    max-height: 154px;
    overflow: hidden;
    margin-bottom: 20px;
    display: flex;
    img {
      min-width: 124px;
      height: 154px;
      border: 1px solid #ccc;
    }

    div.right {
      padding-left: 10px;
      p {
        color: #999;
        border-bottom: 1px dashed #c3dfea;
        &:nth-of-type(1) {
          display: flex;
          justify-content: space-between;
          height: 35px;
          align-items: center;
        }
        &:nth-of-type(2) {
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 7;
          -webkit-box-orient: vertical;
          font-size: 14px;
        }
        span {
          font-size: 14px;
          &:nth-of-type(1) {
            font-size: 16px;
            color: #333;
          }
        }
      }
    }
  }
}
</style>

